<template>
	<div class="app-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">编辑表单</span>
				<span class="h-panel-right"><a @click="close"><i class="icon guanbi"></i></a></span>
			</div>
			<div class="h-panel-body">
				<Row :space="30">
					<Cell :xs='24' :sm='24' :md='12' :lg='12' :xl='12'>
						<Form :label-width="100">
							<div class="bg-primary-color white-color" style="padding: 10px;margin-bottom: 20px;">组件列表</div>
							<draggable :list="componentList" :options="dragOptions1">
								<transition-group class="form-list-group" type="transition" :name="'flip-list'" tag="div">
									<Render v-for="(item,index) in componentList" :key="'cl'+index" :conf="item"></Render>
								</transition-group>
							</draggable>
						</Form>
					</Cell>
					<Cell :xs='24' :sm='24' :md='12' :lg='12' :xl='12'>
						<Form ref="formValidate" :label-width="100" @submit.native.prevent>
							<div class="bg-dark-color white-color" style="padding: 10px;margin-bottom: 20px;">将需要的组件拖动此处</div>
							<draggable :list="componentUsed" :options="dragOptions2">
								<transition-group class="form-list-group" style="margin-right: 50px;" type="transition" :name="'flip-list'" tag="div">
									<Render @handleRemoveEle="removeEle" @handleConfEle="confEle" v-for="(item,index) in componentUsed" :key="'cu'+index" :conf="item" :index="index" :config-icon="true"></Render>
								</transition-group>
							</draggable>
						</Form>
					</Cell>
				</Row>
				<div style="border-top:1px solid #eee;">
					<Form :label-width="100" mode="twocolumn">
						<FormItem label="表单名称">
							<input type="text" v-model="data.name"/>
						</FormItem>
						<FormItem>
							<Button color="primary" :loading="loading" @click="submit">保存</Button>
							<Button @click="close">取消</Button>
						</FormItem>
					</Form>
				</div>
			</div>
		</div>
		<Modal v-model="showModal" :closeOnMask="false">
			<div slot="header">配置属性</div>
			<Form class="form_content" :label-width="80" :model="componentData" ref="componentData">
				<FormItem label="组件名称：">
					<input type="text" v-model="componentData.name" placeholder="请输入组件名称" :maxlength="5"/>
				</FormItem>
				<FormItem label="数据字典：" v-if="componentData.type=='checkbox' || componentData.type=='radio' || componentData.type=='select'">
					<Form class="setting-form">
						<FormItem>
							<Button color="primary" @click="datasAdd">新增一行</Button>
						</FormItem>
						<Table :datas="componentData.datas" :height="200">
							<TableItem :width="50" align="center" title="编号">
								<template slot-scope="{data}">
									<input type="text" v-model="data.id" style="width: 80%;" placeholder="数字"/>
								</template>
							</TableItem>
							<TableItem :width="150" align="center" title="名称">
								<template slot-scope="{data}">
									<input type="text" v-model="data.name" style="width: 80%;" placeholder="请填写名称"/>
								</template>
							</TableItem>
							<TableItem :width="50" align="center" title="操作">
								<template slot-scope="{data}">
									<button class="h-btn h-btn-s h-btn-red" title="删除" @click="datasDelete(data)"><i class="icon shanchu"></i></button>
								</template>
							</TableItem>
						</Table>
					</Form>
				</FormItem>
				<FormItem label="JSON字典:" v-if="componentData.type=='category'">
					<input type="text" v-model="componentData.url" placeholder="JSON地址"/>
				</FormItem>
				<FormItem label="唯一字段：">
					<input type="text" v-model="componentData.field" placeholder="请输入组件唯一字段."/>
				</FormItem>
				<FormItem label="提示信息：" v-if="componentData.type!='checkbox' && componentData.type!='radio'">
					<input type="text" v-model="componentData.placeholder" placeholder="请输入提示信息"/>
				</FormItem>
				<FormItem label="是否必填：">
					<Checkbox v-model="componentData.require">必填</Checkbox>
				</FormItem>
				<FormItem label="是否多选：" v-if="componentData.type=='category'">
					<Checkbox v-model="componentData.multiple">多选</Checkbox>
				</FormItem>
				<FormItem label="时间格式：" v-if="componentData.type == 'date'">
					<Radio value="date" v-model="componentData.format">日期</Radio> 
					<Radio value="datetime" v-model="componentData.format">日期+时间</Radio>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button color="primary" @click="handleOk">确定</Button>
				<Button @click="handleCancel">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import draggable from "vuedraggable"
import {Render,FormList} from '@/components/custom-form'
import ColorPicker from 'heyui/lib/components/color-picker'
export default {
	components: {
		draggable,
		Render,
		ColorPicker
	},
	props: {
		id: Number,
		default : 0
	},
	data() {
		return {
			loading: false,
			data: {},
			componentList: FormList,
			componentUsed: [],
			componentData: {},
			showModal: false
		}
	},
	mounted() {
		if(this.id > 0){
			this.getData()
		}
	},
	methods: {
		async getData() {
			this.data = await this.$api('GET','form/'+this.id)
			this.componentUsed = this.data.data || '[]'
		},
		async submit (){
			let res = 0
			this.componentUsed.forEach(v =>{
				if(v.datas){
					v.datas.forEach(vv =>{
						if(vv._heyui_uuid){
							delete vv._heyui_uuid
						}
					})
				}
				if(!v.field){
					res = v.name
				}
			})
			if(res){
				this.$Message.error(res+' 的唯一字段必须填写!')
				return
			}
			this.loading = true
			if(this.id > 0){
				res = await this.$api('PUT','form/'+this.id,{name:this.data.name,data:this.componentUsed})
			}else{
				res = await this.$api('POST','form',{name:this.data.name,data:this.componentUsed})
			}
			this.loading = false
			if(res){
				this.close()
			}
		},
		close (){
			this.$emit('close')
		},
		datasAdd() {
			this.componentData.datas.push({id:this.componentData.datas.length+1,name: ''})
		},
		datasDelete(data){
			this.componentData.datas.splice(this.componentData.datas.indexOf(data), 1)
		},
		// modal点击确定执行事件
		handleOk() {
			let isSame = false
			let index = this.componentData.listIndex
			this.componentUsed.forEach((v,k) =>{
				if(v.field == this.componentData.field && k != index){
					isSame = true
				}
			})
			if(isSame){
				this.$Modal({
					title: '错误',
					content: '唯一字段重复!'
				})
			}else{
				this.$set(this.componentUsed,index,Object.assign({},this.componentUsed[index],this.componentData))
				if(this.componentData.url && this.componentData.url != this.componentUsed[index]){
					this.componentUsed[index].datas = []
				}
				this.handleCancel()
			}
		},
		// modal点击取消执行事件，清空当前modal内容
		handleCancel() {
			this.showModal = false
		},
		// 显示modal,配置被克隆控件
		confEle(index) {
			this.componentData = []
			let list_temp = JSON.parse(JSON.stringify(this.componentUsed[index]))//组件深拷贝
			for (let i in list_temp) {
				this.componentData[i] = list_temp[i]
			}
			// 设置被配置控件的index，便于完成配置找到相应对象赋值
			this.componentData.listIndex = index;
			// Vue 不能检测到对象属性的添加或删除
			this.componentData = Object.assign({}, this.componentData)
			this.showModal = true
		},
		// 删除克隆控件
		removeEle(index) {
			this.componentUsed.splice(index, 1)
		}
	},
	computed: {
		// 拖拽表单1
		dragOptions1() {
			return {
				animation: 150,
				ghostClass: "ghost",
				// 分组
				group: {
				name: "shared",
				pull: "clone",
				revertClone: false
				},
				// 禁止拖动排序
				sort: false
			}
		},
		// 拖拽表单2
		dragOptions2() {
			return {
				animation: 150,
				ghostClass: "ghost",
				group: {
				// 只允许放置shared的控件,禁止pull
				put: ["shared"]
				}
			}
		}
	}
};
</script>

<style lang="less">

.wrapper {
	padding: 15px
}

.h-form-item{
	padding: 10px !important;
}

.form-list-group {
	min-height: 550px;
	p,hr{
		cursor:move;
	}
}
.h-select-show{
	position:relative;
}
.h-form-item-label{
	cursor:move;
}
.item-icon {
	position: absolute;
	top: 0;
	right: -50px;
	cursor: pointer !important;
}
.item-icon i {
	margin: 3px;
}
.item-icon i:hover {
	color: #cc0000;
}

.h-checkbox > label:last-child{
	margin-right:15px !important;
}
.form_content{
	width:400px;
}
</style>